<template>
	<div>
	    <div class="main_operation">
	        <div class="operation_left" >
	        </div>
	        <div class="operation_right">
	        </div>
	    </div>
	    <div class="main">
	        <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data"
            :rowKey="record => record.id"
            :scroll="{x: 800, y: 500 }"
          >
          <template slot="action" slot-scope="text, record">
              <a-button v-if="routerShow($route,'template_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
          </template>
		    </a-table>
        <div class="pageBox">
          <a-pagination
            :total="dataLists.total"
            :showTotal="total => `共 ${total} 条数据`"
            :pageSize="dataLists.per_page"
            :defaultCurrent="1"
            @change="pageChange"
          />
        </div>
	    </div>
	</div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
    export default {
		name: "newsList",
		data(){
			return {
        /* 通用模块 */
          //列表
        tableLoad: false,//列表loading状态
        formList:{          //列表信息
        	page: 1
        },
        selectedRowKeys: [],//勾选的id
        /* 通用模块end */
			}
		},
    computed: {
    	...mapState({
    		Fields: state => state.equiRegister.templateFields,
    		dataLists: state => state.equiRegister.templateDataLists,
    		requestCode: state => state.equiRegister.requestCode,
    	}),
    },
		mounted() {
        this.changeData()
    },
    methods: {
      ...mapActions({
      	getLists: 'equiRegister/getTemplateLists',     //列表
      	dataDel: 'equiRegister/templateDel',        //删除
      }),
      /* 通用模块 */
        // 勾选
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys
      },
        // 重新获取列表数据
      changeData(){
        this.tableLoad = true
        setTimeout(()=> {
          this.getLists(this.formList)
          this.tableLoad = false
        }, 800);
      },
        // 页码
      pageChange(page) {
      	this.formList.page = page;
      	this.getLists(this.formList)
      },
      /* 通用模块end */
      //添加跳转
			addBtn() {
        this.$router.push('/news/Add')

			},
      // 编辑跳转
			editBtn(item) {
        this.$router.push(`/news/edit/${item.id}`)
			},
      //删除
      delBtn(item){
        const _this = this
        this.$confirm({
        	title: `您确定要删除该数据吗?`,
        	content: `删除后将不可恢复,请仔细核对!`,
        	okText: '确定',
        	okType: 'danger',
        	cancelText: '取消',
        	onOk() {
        		_this.dataDel(item.id)
        		_this.changeData()
        	},
        });
      },
      //批量删除
      batchDelBtn(){
        if(this.selectedRowKeys.length <= 0) {
          this.$warning({
            title: '提示',
            content: '请先勾选需要删除的数据',
          });
          return false
        }
        const _this = this
        let ids = {
          id: this.selectedRowKeys
        }
        this.$confirm({
        	title: `您确定要删除勾选的数据吗?`,
        	content: `删除后将不可恢复,请仔细核对!`,
        	okText: '确定',
        	okType: 'danger',
        	cancelText: '取消',
        	onOk() {
        		_this.dataDel(ids)
        		_this.changeData()
        	},
        });
      },
      /* 详情 */
      details(item){
        // this.dataDetail(item.id)
        this.$router.push(`/news/detail/${item.id}`)


        
      },
    },
  }
</script>

<style  lang="less" scoped>
  .modalUl {
    font-size: 16px;
    li {
      margin-bottom: 10px;
      span {
        font-weight: bold;
        margin-right: 10px;
      }
      div{
        display: line;
        border: 1px solid #ccc;
      }
    }
  }
</style>
